<!DOCTYPE html>
<html>
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/static/assets/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/assets/css/checkbox.css" media="all">
    <title>系统日志</title>
</head>
<body>
<div class="layui-input-inline">
    <input type="text" name="title" required lay-verify="required" id="userName" placeholder="用户名" autocomplete="off"
           class="layui-input">
</div>
<div class="layui-input-inline">
    <input type="text" name="title" required lay-verify="required" id="beginTime" placeholder="开始时间" autocomplete="off"
           class="layui-input">
</div>
<div class="layui-input-inline">
    <input type="text" name="title" required lay-verify="required" id="endTime" placeholder="结束时间" autocomplete="off"
           class="layui-input">
</div>
<button type="button" class="layui-btn" id="search">查询</button>
<button type="button" class="layui-btn" id="reset">重置</button>
<table style="width: 90%" id="logList" lay-filter="test"></table>
<script src="/static/assets/layui.js" charset="utf-8"></script>
<script src="/static/assets/jquery.min.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    $(function () {

        var beginTime;
        var endTime;
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#beginTime' //指定元素
                , type: 'datetime'
                , done: function (value, date, endDate) {
                    console.log(value); //得到日期生成的值，如：2017-08-18
                    beginTime = value;
                }
            });
            laydate.render({
                elem: '#endTime' //指定元素
                , type: 'datetime'
                , done: function (value, date, endDate) {
                    console.log(value); //得到日期生成的值，如：2017-08-18
                    endTime = value;
                }
            });
        });

        layui.use('table', function () {
            var table = layui.table;
            // table.attr("style","width:90%")
            //第一个实例
            table.render({
                elem: '#logList'
                , url: '/log/showAll' //数据接口
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , title: '日志记录'
                , cols: [
                    [ //表头
                        {type: 'checkbox', fixed: 'left'}
                        , {field: 'logId', title: 'ID', sort: true}
                        , {field: 'logContent', title: '操作内容'}
                        , {field: 'logTime', title: '时间', sort: true}
                        , {field: 'userName', title: '用户名'}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
                    ]
                ]
                , response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.data.totalCount, //解析数据长度
                        "data": res.data.logs//解析数据列表
                    };
                }
                , page: true //开启分页
                , id: "logList"
            });

            $("#search").on("click", function () {
                var userName = $("#userName").val()
                if (!endTime || !beginTime) {
                    table.reload('logList', {
                        where: { //设定异步数据接口的额外参数，任意设
                            userName: userName
                        }
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                } else {
                    table.reload('logList', {
                        where: { //设定异步数据接口的额外参数，任意设
                            userName: userName
                            , beginTime: new Date(beginTime)
                            , endTime: new Date(endTime)
                        }
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                }
            })
            $("#reset").on("click", function () {
                location.reload()
            })
        });
    })

</script>
</body>
</html>
